<script setup>
import {getUUID} from "@/utils/getuuid.js"
import { defineProps } from 'vue';
const emits = defineEmits()
const handleCreateRect = () => {
  let shape = {
    id: getUUID(),
    modelName: '', //名字
    bounds: {
      width: 200,  // 宽
      height: 100,  // 高
      absx: 50,  // X轴位置
      absy: 50,  // Y轴位置
    },
    style: {
      rx: '10',   // 横轴弯曲度
      ry: '10',  // 纵轴弯曲度
      fill: '#fff',  // 背景色 或别的
      stroke: '#000',  // 边框颜色
      strokeWidth: '2',  // 边框宽度
    },
    type: 'model'
  }

  emits('createShape', shape)
}
</script>

<template>
  <div class="sidebar">
    <svg width="100%" height="100%" ref="mainSvg">
      <rect @click="handleCreateRect"
        :width="100" 
        :height="50" 
        :rx="10" 
        :ry="10" 
        :x="50" 
        :y="50" 
        fill="#fff" 
        stroke="#000" 
        :stroke-width="2"
        >
      </rect>

    </svg>
  </div>
</template>

<style scoped>
.sidebar{
  width: 20%;
}
</style>